@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-size: 16px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}

@layer components {
  .profile-container {
    @apply mx-auto flex h-svh max-w-4xl flex-col content-center justify-center
      p-8;
  }

  .profile-header {
    @apply mb-8 flex gap-8 rounded-2xl p-8 text-white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .avatar-section {
    @apply flex-shrink-0;
  }

  .avatar {
    @apply mx-auto h-30 w-30 rounded-full object-cover;
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  .user-info {
    @apply flex flex-1 flex-col justify-center;
  }

  .user-name {
    @apply mb-2 text-4xl font-bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 0 0.5rem 0;
  }

  .user-handle {
    @apply mb-4 text-xl font-medium;
    opacity: 0.9;
  }

  .user-bio {
    @apply text-lg leading-relaxed;
    opacity: 0.95;
    margin: 0;
  }

  .profile-content {
    @apply grid gap-8;
  }

  .info-card {
    @apply rounded-xl border bg-background p-8 text-foreground;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.05);
  }

  .info-card h3 {
    @apply mb-6 text-2xl font-semibold;
    margin: 0 0 1.5rem 0;
  }

  .info-grid {
    @apply grid gap-4;
  }

  .info-item {
    @apply flex flex-col justify-between border-b py-3;
    border-color: rgba(0, 0, 0, 0.05);
  }

  .info-item:last-child {
    @apply border-b-0;
  }

  .info-label {
    @apply text-sm font-semibold;
    color: color-mix(in srgb, var(--foreground) 60%, transparent);
  }

  .fedify-anchor {
    @apply h-6 rounded-md bg-sky-300 px-1 py-0.5 font-medium text-white;
    &:before {
      @apply mr-1 mb-1 inline-block size-4 align-middle;
      content: "";
      background-image: url("/fedify-logo.svg");
      background-size: 16px 16px;
    }
  }

  @media (max-width: 768px) {
    .profile-container {
      @apply p-4;
    }

    .profile-header {
      @apply flex-col content-center gap-4 text-center;
    }

    .user-name {
      @apply text-3xl;
    }

    .info-item {
      @apply flex-col items-start gap-1;
    }
  }

  /* Posts Page Styles */
  .post-form {
    @apply mx-auto my-8 max-w-4xl rounded-xl border p-6;
    background: var(--background);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .form-group {
    @apply mb-4;
  }

  .form-label {
    @apply mb-2 block text-lg font-semibold;
    color: var(--foreground);
  }

  .form-textarea {
    @apply w-full resize-none rounded-lg border p-3 text-base focus:ring-2
      focus:ring-blue-500 focus:outline-none;
    background: var(--background);
    color: var(--foreground);
    border-color: rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .form-textarea:focus {
    border-color: #3b82f6;
  }

  .post-button {
    @apply rounded-lg px-6 py-2 font-semibold text-white transition-all
      duration-200;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .post-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .error-state,
  .loading-state {
    @apply py-12 text-center;
  }

  .error-state p {
    @apply text-lg text-red-600;
  }

  .loading-state p {
    @apply mt-4 text-gray-600;
  }

  .posts-container {
    @apply mx-auto max-w-4xl;
  }

  .posts-title {
    @apply mb-6 text-2xl font-bold;
    color: var(--foreground);
  }

  .posts-grid {
    @apply grid gap-6;
  }

  .post-card {
    @apply rounded-xl border transition-all duration-200 hover:shadow-lg;
    background: var(--background);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .post-card:hover {
    transform: translateY(-2px);
  }

  .post-link {
    @apply block p-6 no-underline;
    color: inherit;
  }

  .post-header {
    @apply mb-4 flex items-center gap-3;
  }

  .post-avatar {
    @apply h-12 w-12 rounded-full border-2 border-gray-200 object-cover;
  }

  .post-user-info {
    @apply flex-1;
  }

  .post-user-name {
    @apply mb-1 text-lg font-semibold;
    color: var(--foreground);
  }

  .post-user-handle {
    @apply text-sm opacity-70;
    color: var(--foreground);
  }

  .post-content {
    @apply text-base leading-relaxed;
    color: var(--foreground);
  }

  .post-content p {
    @apply m-0;
  }

  /* Skeleton Styles */
  .skeleton-avatar {
    @apply h-12 w-12 animate-pulse rounded-full bg-gray-300;
  }

  .skeleton-info {
    @apply flex-1 space-y-2;
  }

  .skeleton-line {
    @apply h-4 animate-pulse rounded bg-gray-300;
  }

  .skeleton-name {
    @apply w-24;
  }

  .skeleton-handle {
    @apply w-32;
  }

  @media (max-width: 768px) {
    .posts-container {
      @apply px-4;
    }

    .post-form {
      @apply p-4;
    }
  }

  /* Post Detail Page Styles */
  .post-detail-container {
    @apply mx-auto max-w-4xl p-8;
  }

  .post-detail-header {
    @apply mb-8;
  }

  .back-button {
    @apply rounded-lg bg-gray-100 px-4 py-2 font-medium text-gray-700
      transition-all duration-200 hover:bg-gray-200 focus:ring-2
      focus:ring-blue-500 focus:outline-none;
    color: var(--foreground);
    background: color-mix(in srgb, var(--foreground) 10%, transparent);
  }

  .back-button:hover {
    background: color-mix(in srgb, var(--foreground) 15%, transparent);
  }

  .post-detail-card {
    @apply mb-8 rounded-xl border p-8;
    background: var(--background);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  .post-detail-author {
    @apply mb-6 flex items-start gap-4 border-b pb-6;
    border-color: rgba(0, 0, 0, 0.1);
  }

  .author-avatar {
    @apply h-16 w-16 rounded-full border-2 border-gray-200 object-cover;
  }

  .author-info {
    @apply flex-1;
  }

  .author-name {
    @apply mb-1 text-2xl font-bold;
    color: var(--foreground);
  }

  .author-handle {
    @apply mb-2 text-base font-medium opacity-70;
    color: var(--foreground);
  }

  .post-timestamp {
    @apply text-sm opacity-60;
    color: var(--foreground);
  }

  .post-detail-content {
    @apply py-6 text-lg leading-relaxed;
    color: var(--foreground);
  }

  .post-detail-content p {
    @apply m-0;
  }

  .post-actions {
    @apply rounded-xl border p-6;
    background: var(--background);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .action-group h3 {
    @apply mb-4 text-lg font-semibold;
    color: var(--foreground);
  }

  .action-buttons {
    @apply flex flex-wrap gap-3;
  }

  .action-button {
    @apply rounded-lg px-4 py-2 font-medium transition-all duration-200
      focus:ring-2 focus:ring-blue-500 focus:outline-none;
  }

  .like-button {
    @apply bg-red-100 text-red-700 hover:bg-red-200;
  }

  .share-button {
    @apply bg-blue-100 text-blue-700 hover:bg-blue-200;
  }

  .reply-button {
    @apply bg-green-100 text-green-700 hover:bg-green-200;
  }

  .error-back-button {
    @apply mt-4 rounded-lg bg-gray-100 px-6 py-2 font-medium text-gray-700
      transition-all duration-200 hover:bg-gray-200;
  }

  /* Skeleton styles for post detail */
  .skeleton-post {
    @apply rounded-xl border p-8;
    background: var(--background);
    border-color: rgba(0, 0, 0, 0.1);
  }

  .skeleton-header {
    @apply mb-6 flex items-start gap-4 border-b pb-6;
    border-color: rgba(0, 0, 0, 0.1);
  }

  .skeleton-content {
    @apply space-y-3 py-6;
  }

  .skeleton-text-1 {
    @apply w-full;
  }

  .skeleton-text-2 {
    @apply w-4/5;
  }

  .skeleton-text-3 {
    @apply w-3/5;
  }

  @media (max-width: 768px) {
    .post-detail-container {
      @apply p-4;
    }

    .post-detail-card {
      @apply p-6;
    }

    .author-avatar {
      @apply h-14 w-14;
    }

    .author-name {
      @apply text-xl;
    }

    .post-detail-content {
      @apply text-base;
    }

    .action-buttons {
      @apply flex-col;
    }

    .action-button {
      @apply w-full justify-center;
    }
  }
}
